<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心悦酒店数据报道</title>
    <!-- App favicon -->
    <link rel="shortcut icon" href="/assets/images/favicon.ico">
    <link href="/assets/plugins/jvectormap/jquery-jvectormap-2.0.2.css" rel="stylesheet">

    <!-- App css -->
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/icons.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/metismenu.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/style.css" rel="stylesheet" type="text/css" />
    <!-- 引入vue cdn -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入axios -->
    <script src="/app/vue/axios/axios.min.js"></script>
</head>
<body class="container_12">
    <div class="box round first" style="margin:15px;" id="vue-box">
        <h2>数据列表</h2>
        <div class="block">
            <div>
                <div id="container"></div>
            </div>
        </div>
    </div>

    <!-- jQuery  -->
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/bootstrap.bundle.min.js"></script>
    <script src="/assets/js/metisMenu.min.js"></script>
    <script src="/assets/js/waves.min.js"></script>
    <script src="/assets/js/jquery.slimscroll.min.js"></script>

    <script src="/assets/plugins/jvectormap/jquery-jvectormap-2.0.2.min.js"></script>
    <script src="/assets/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>

    <script src="/assets/plugins/moment/moment.js"></script>
    <script src="/assets/plugins/apexcharts/apexcharts.min.js"></script>
    <script src="/assets/pages/jquery.dashboard.init.js"></script>
    <!-- App js -->
    <script src="/assets/js/app.js"></script>
    <script src="/source/scripts/window.js"></script>
    <script src="/source/js.js"></script>
    <script>
        $().ready(function () {
            $(".uploadImg").click(function () {
                openWindow("<%=basePath%>upload.jsp");
            });
            $("#thumb").on("input", function () {
                $(".oldImg").attr("src", "<%=basePath%>" + $("#thumb").val());
            });
        });
    </script>
    <link href="/toastr-master/toastr.min.css" rel="stylesheet" type="text/css"/>
    <script src="/toastr-master/toastr.min.js"></script>
    <script>
        /*<c:if test="${!empty state }">
        toastr.${state}('${message}', '提示');
        setTimeout(function(){
                window.location.href = "<%=basePath%>${url}";
        },1500)*/
    </script>
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script type="text/javascript">
        $(function () {
            let reportData = {};
            const baseUrl = "http://localhost:8080";
            // 获取admin首页报道数据。API：http://localhost:8080/hotel/apply/report/data
            axios({
                method: "get",
                url: baseUrl + "/" + "hotel/apply/report/data",
                responseType: "json"
            }).then(response => {
                console.log(response);
                reportData = response.data.data;
                // console.log(reportData.n1,reportData.n2,reportData.n3,reportData.n4,reportData.n5,reportData.n6);
                Highcharts.chart('container', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: '统计'
                },
                subtitle: {
                    text: '--'
                },
                xAxis: {
                    categories: [
                        "用户", "栏目", "房间", "预定", "轮播", "新闻"
                    ],
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '数据'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y}</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: '数据',
                    // data: [${ n1 }, ${ n2 }, ${ n3 }, ${ n4 }, ${ n5 }]
                    data: [reportData.n1,reportData.n2,reportData.n3,reportData.n4,reportData.n5,reportData.n6]
                }]
            });
            }).catch(error => {
                alert("请求失败，错误信息：",error);
            });
        });
    </script>
</body>

</html>